<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机处理器品牌</title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                "url" : "/ajax/CPU",
                "data" : {"level" : "1"},
                "type" : "get" ,
                "dataType" : "json" ,
                "success" : function(json){
                    // console.log(json);
                    for(var i = 0 ; i < json.length ; i++){
                        var a = json[i];
                        $("#lv1").append("<option value='" + a.type + "'>" + a.name + "</option>")
                    }
                }
            })
        })

        $(function(){
            $("#lv1").on("change" , function(){
                var first = $(this).val();
                // console.log(first);
                $.ajax({
                    "url" : "/ajax/CPU" ,
                    "data" : {"level" : "2" , "first" : first},
                    "dataType" : "json" ,
                    "type" : "get" ,
                    "success" : function(json){
                        // console.log(json);
                        //移除所有lv2下的原始option选项
                        $("#lv2>option").remove();
                        for(var i = 0 ; i < json.length ; i++){
                            var a = json[i];
                            $("#lv2").append("<option value='" + a.type +"'>" + a.name + "</option>")
                        }
                    }
                })
            })
        })

    </script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
    <option selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px"></select>
</body>
</html>